<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Home</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/bootstrap.css" media="all">
	<link href="css/bootstrap-responsive.css" rel="stylesheet">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.js"></script>
	<style>
	 html,
     body {
        height: 100%;
      }
     #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -60px;
        padding-top: 50px;
      }
      #push,
	 #footer {
        height: 60px;
      }
      #footer {
        background-color: #EEEEEE;
      }

      /* Lastly, apply responsive CSS fixes as necessary */
      @media (max-width: 767px) {
        #footer {
          margin-left: -20px;
          margin-right: -20px;
          padding-left: 20px;
          padding-right: 20px;
        }
      }
      .container {
        width: auto;
        max-width: 980px;
      }
      .container .credit {
        margin: 20px 0;
      }
</style>
</head>
<body>
	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container-fluid">
				<a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</a>
				<a href="#" class="brand">ProJect</a>
				<div class="nav-collapse collapse navbar-responsive-collapse">
					<ul class="nav">
						<li class="active">
							<a href="#">Home</a>
						</li>
						<li>
							<a href="post.html">Link</a>
						</li>
						<li>
							<a href="#">Link</a>
						</li>
						<li class="dropdown">
							<a data-toggle="dropdown" class="dropdown-toggle" href="#">
								Dropdown <strong class="caret"></strong>
							</a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">Action</a>
								</li>
								<li>
									<a href="#">Another action</a>
								</li>
								<li>
									<a href="#">Something else here</a>
								</li>
								<li class="divider"></li>
								<li class="nav-header">Nav header</li>
								<li>
									<a href="#">Separated link</a>
								</li>
								<li>
									<a href="#">One more separated link</a>
								</li>
							</ul>
						</li>
					</ul>
					<ul class="nav pull-right">
						<li>
							<a href="#">Link</a>
						</li>
						<li class="divider-vertical"></li>
						<li class="dropdown">
							<a data-toggle="dropdown" class="dropdown-toggle" href="#">
								Dropdown <strong class="caret"></strong>
							</a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">Action</a>
								</li>
								<li>
									<a href="#">Another action</a>
								</li>
								<li>
									<a href="#">Something else here</a>
								</li>
								<li class="divider"></li>
								<li>
									<a href="#">Separated link</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<div id="wrap">
		<div class="carousel slide" id="carousel-741831">
			<ol class="carousel-indicators">
				<li class="" data-slide-to="0" data-target="#carousel-741831"></li>
				<li data-slide-to="1" data-target="#carousel-741831" class=""></li>
				<li data-slide-to="2" data-target="#carousel-741831" class="active"></li>
			</ol>
			<div class="carousel-inner">
				<div class="item">
					<img alt="" src="http://www.bootcss.com/p/layoutit/img/1.jpg">
					<div class="carousel-caption" contenteditable="true">
						<h4>棒球</h4>
						<p>棒球运动是一种以棒打球为主要特点，集体性、对抗性很强的球类运动项目，在美国、日本尤为盛行。</p>
					</div>
				</div>
				<div class="item">
					<img alt="" src="http://www.bootcss.com/p/layoutit/img/2.jpg">
					<div class="carousel-caption" contenteditable="true">
						<h4>冲浪</h4>
						<p>
							冲浪是以海浪为动力，利用自身的高超技巧和平衡能力，搏击海浪的一项运动。运动员站立在冲浪板上，或利用腹板、跪板、充气的橡皮垫、划艇、皮艇等驾驭海浪的一项水上运动。
						</p>
					</div>
				</div>
				<div class="item active">
					<img alt="" src="http://www.bootcss.com/p/layoutit/img/3.jpg">
					<div class="carousel-caption" contenteditable="true">
						<h4>自行车</h4>
						<p>
							以自行车为工具比赛骑行速度的体育运动。1896年第一届奥林匹克运动会上被列为正式比赛项目。环法赛为最著名的世界自行车锦标赛。
						</p>
					</div>
				</div>
			</div>
			<a data-slide="prev" href="#carousel-741831" class="left carousel-control">‹</a>
			<a data-slide="next" href="#carousel-741831" class="right carousel-control">›</a>
		</div>
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span4">
					<h2>Heading</h2>
					<p>
						Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
					</p>
					<p>
						<a class="btn" href="#">View details 禄</a>
					</p>
				</div>
				<div class="span4">
					<h2>Heading</h2>
					<p>
						Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
					</p>
					<p>
						<a class="btn" href="#">View details 禄</a>
					</p>
				</div>
				<div class="span4">
					<h2>Heading</h2>
					<p>
						Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
					</p>
					<p>
						<a class="btn" href="#">View details 禄</a>
					</p>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span4">
					<h2>Heading</h2>
					<p>
						Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
					</p>
					<p>
						<a class="btn" href="#">View details 禄</a>
					</p>
				</div>
				<div class="span4">
					<h2>Heading</h2>
					<p>
						Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
					</p>
					<p>
						<a class="btn" href="#">View details 禄</a>
					</p>
				</div>
				<div class="span4">
					<h2>Heading</h2>
					<p>
						Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
					</p>
					<p>
						<a class="btn" href="#">View details 禄</a>
					</p>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span4">
					<h2>Heading</h2>
					<p>
						Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
					</p>
					<p>
						<a class="btn" href="#">View details 禄</a>
					</p>
				</div>
				<div class="span4">
					<h2>Heading</h2>
					<p>
						Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
					</p>
					<p>
						<a class="btn" href="#">View details 禄</a>
					</p>
				</div>
				<div class="span4">
					<h2>Heading</h2>
					<p>
						Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
					</p>
					<p>
						<a class="btn" href="#">View details 禄</a>
					</p>
				</div>
			</div>
			<div id="push"></div>
		</div>
	</div>
	<div id="footer">
		<div class="container">
			<p class="muted credit">
				Example courtesy
				<a href="http://martinbean.co.uk">Martin Bean</a>
				and
				<a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>
				.
			</p>
		</div>
	</div>
</body>
</html>